<template>
	<view :class="['bool',!lock?'boolAnimation':'']" :style="{'top':top+'px','left':left+'px'}" @longtap.stop="longTapStart" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
		<slot></slot>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				screenWidth:0,//屏幕宽度
				screenHeight:0,//屏幕高度
				boxPL:0,///当前点击位置距盒子边缘x距离
				boxPT:0,//当前点击位置距离盒子边缘Y距离
				top:0,//盒子距离顶边的距离
				left:0,//盒子距离左边的距离,
				lock:true,//默认不能滑动，长按解锁滑动
			}
		},
		props:{
			//盒子距离左边的距离
			xDistance:{
				type:Number,
				default:100
			},
			//盒子距离顶部的距离
			yDistance:{
				type:Number,
				default:100
			},
			//移动盒子的高度
			boxHeight:{
				type:Number,
				default:60
			},
			//默认盒子的宽度
			boxWidth:{
				type:Number,
				default:60
			},
			//安全距离
			safeDistance:{
				type:Object,
				default:()=>{
					return {
						top:0,//顶部
						left:0,//左边
						right:0,//右边
						bottom:0,//底部
					}
				}
			}
		},
		created() {
			uni.getSystemInfo({
				success:(res)=>{
					this.screenWidth = res.screenWidth;
					this.screenHeight = res.screenHeight;
				}
			});
		},
		mounted() {
			this.top = this.yDistance;
			this.left = this.xDistance;
		},
		methods:{
			longTapStart(e){
				console.log(666);
				let clientX = e.touches[0].clientX;
				let clientY = e.touches[0].clientY;
				this.boxPL = clientX - this.left;//当前点击位置距盒子边缘x距离
				this.boxPT = clientY - this.top;//当前点击位置距离盒子边缘Y距离
				this.lock = false;//解锁滑动姿势
			},
			touchMove(e){
				if(this.lock) return;
				let left =  e.touches[0].clientX;
				let top = e.touches[0].clientY;
				this.left = left - this.boxPL ;
				this.top = top - this.boxPT;
				if(this.left+this.boxWidth>this.screenWidth - this.safeDistance.right){ //x轴移动的距离加上盒子的宽度是否大于可视区域宽度
					this.left = this.screenWidth - this.boxWidth  - this.safeDistance.right; //防止超出右边区域
				}
				if(this.top+this.boxHeight>this.screenHeight - this.safeDistance.bottom){//y轴移动的距离加上盒子的宽度是否大于可视区域宽度
					this.top = this.screenHeight - this.boxHeight - this.safeDistance.bottom; //防止超出下边边区域
				}
				if(this.left<this.safeDistance.left){  //防止超出左边区域
					this.left = this.safeDistance.left;
				}
				if(this.top<this.safeDistance.top){ //防止超出上边区域
					this.top = this.safeDistance.top
				}
				
			},
			touchEnd(e){
				this.lock = true;//滑动事件加锁
			}
		}
	}
</script>
<style scoped lang="scss">
	.bool{
		position: fixed;
		z-index: 100;
		transform: scale(1);
	}
	.boolAnimation{
		animation: bigAni 0.5s 1 ;
	}
	@keyframes bigAni{
		0%{
			transform: scale(1);
		}
		50%{
			transform: scale(1.2);
		}
		100%{
			transform: scale(1);
		}
	}
</style>
